<template>
    <view class="page-creation-book">
        <u-form ref="form1" label-width="160rpx">
                <u-form-item label="书籍封面" label-position="top">
                    <u-upload ref="refCoverImage" :action="upload.api" :header="upload.header" :file-list="upload.coverImageUrl" :max-count="1" :multiple="false" :auto-upload="true"></u-upload>
                </u-form-item>
                <u-form-item label="推荐标题">
                    <u-input v-model="form.title" placeholder="请填写" input-align="right"/>
                </u-form-item>
                <u-form-item label="内容">
                    <u-input v-model="form.content" placeholder="请填写，限1千个字符" :maxlength="1000" type="textarea" input-align="right"/>
                </u-form-item>
                <u-form-item label="书籍名称">
                    <u-input v-model="form.bookName" placeholder="请填写" input-align="right"/>
                </u-form-item>
                <u-form-item label="书籍作者">
                    <u-input v-model="form.bookAuthor" placeholder="请填写" input-align="right"/>
                </u-form-item>
                <u-form-item label="标签">
                    <u-input v-model="form.tags" placeholder="请填写,用|隔开" input-align="right"/>
                </u-form-item>
                <u-form-item label="推荐原因">
                    <u-input v-model="form.recommendationReason" placeholder="请填写" input-align="right"/>
                </u-form-item>
                <u-form-item label="关闭评论区">
                    <template v-slot:right>
                        <u-switch v-model="form.isCommentDisabled" active-color="#24BCB8" size="40"></u-switch>
                    </template>
                </u-form-item>
                <u-form-item label="仅自己可见">
                    <template v-slot:right>
                        <u-switch v-model="form.isPrivate" active-color="#24BCB8" size="40"></u-switch>
                    </template>
                </u-form-item>
                <u-form-item label="不展示在首页" label-width="200rpx">
                    <template v-slot:right>
                        <u-switch v-model="form.isFeatured" active-color="#24BCB8" size="40"></u-switch>
                    </template>
                </u-form-item>
            </u-form>
        <view class="submit-bar flex-between mt-4">
            <view class="fl" @click="submitForm(0)">
                <u-image :src="proxy.$icon.draft" width="48rpx" height="44rpx" class="display-inline"></u-image>
                <view class="c-grey9">存草稿</view>
            </view>
            <view class="fr ">
                <!-- <view class="btn-deepCyan" @click="submitForm(1)">提交</view> -->
                <u-button class="btn-deepCyan" :loading="btnLoading" @click="submitForm(1)">提交</u-button>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import {onShow, onLoad } from '@dcloudio/uni-app';
import {apiUrl} from '@/static/js/config';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const refCoverImage = ref();
let pageParams = reactive({});
let btnLoading = ref(false);
let form = reactive({
  "title": '',
  "content": '',
  "userId": null,
  "coverImageUrl": [],
  "bookName": '',
  "bookAuthor": '',
  "articlesType": '2',//0:文章,1:笔记,2:推书
  "tags": '',
  "recommendationReason": '',
  "isCommentDisabled": false, //是否关闭评论区 (0: 否, 1: 是)
  "isPrivate": false, //是否仅自己可见 (0: 否, 1: 是)
  "isFeatured": false, //是否展示在首页 (0: 否, 1: 是)
  "sensitiveContentWarning": '0',
  "activitiesId": null,
  "status": '',
});
let upload = reactive({
    // api: 'http://book.caochuanxi.com/api/admin/sys-file/upload',
    api: apiUrl + '/admin/sys-file/upload',
    header: {
        Authorization: `Bearer ${uni.getStorageSync('accessToken')}`,
        "TENANT-ID": 1,
        'CLIENT-TOC': 'Y'
    },
    coverImageUrl: [],
});
const getDetail = () => {
    proxy.$http('get', '/admin/articles/'+ pageParams.id, {}, (data,msg) => {
        proxy.$util.resetForm(form, data);
        form.isCommentDisabled = form.isCommentDisabled == '1' ? true : false;
        form.isPrivate = form.isPrivate == '1' ? true : false;
        form.isFeatured = form.isFeatured == '1' ? true : false;
        form.sensitiveContentWarning = form.sensitiveContentWarning == '1' ? true : false;
        upload.coverImageUrl = proxy.$util.getResImageList(data.coverImageUrl);        
    })
}
const verifyForm = () => {
    if(!proxy.$verify.null(form.title, '请输入标题')){
        return false;
    }
    if(!proxy.$verify.null(form.content, '请输入正文内容')){
        return false;
    }
    let coverImageList = refCoverImage.value.lists;
    if(coverImageList.length == 0){
        uni.showToast({title: '请上传书籍封面'});
        return false;
    }
    return true;
}
const submitForm = (status) => {
    if(status == 1){
        if(!verifyForm()){
            return;
        }
    }
    let params = JSON.parse(JSON.stringify(form));
    params.isCommentDisabled = form.isCommentDisabled ? '1' : '0';
    params.isPrivate = form.isPrivate ? '1' : '0';
    params.isFeatured = form.isFeatured ? '1' : '0';
    let coverImageList = refCoverImage.value.lists;
    params.coverImageUrl = proxy.$util.getImageUrl(coverImageList);
    params.status = status;
    btnLoading.value = true;
    proxy.$http('post', '/admin/articles', params, (data,msg) => {
        btnLoading.value = false;
        uni.$u.toast('提交成功');
        uni.navigateBack({delta:1});
    },msg => {
        btnLoading.value = false;
    })
};
onLoad((e) => {
    pageParams = e;  
    if(pageParams.id){
        getDetail();
    }else{
        let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
        form.userId = userInfo.userId;
    }
});
</script>
<style>
page{height:100%;background:#fff;}
</style>